<template>
  <div>
      <div class="box">
          <ul>
              <li><van-icon name="arrow-left" /></li>
              <li>个人信息</li>
              <li><img src="../assets/个人中心/形状 557.png" alt=""></li>
          </ul>
      </div>
    <ul>
      <li class="app">
        <p>姓名</p>
        <p>{{name}}</p>
      </li>
      <li class="app">
        <p>联系电话</p>
        <p>{{phone}}</p>
      </li>
      <li class="app">
        <p>性别</p>
        <p>{{sex}}</p>
      </li>
      <li class="app">
        <p>年薪</p>
        <p>{{year_salary}}</p>
      </li>
      <li class="app"> 
        <p>月薪</p>
        <p>{{month_salary}}</p>
      </li>
      <li class="app">
        <p>个人简介</p>
        <p>{{remark}}</p>
      </li>
    </ul>
  </div>

</template>

<script>
import {userInfoData} from '../request/api'
export default {
  data() {
    return {
        name:'',
        phone:'',
        sex:'',
        year_salary:'',
        month_salary:'',
        remark:''
    };
  },
  created(){
      userInfoData().then(res=>{
          console.log(res);
          let {name,phone,sex,year_salary,month_salary,remark}=res.data
          this.name=name
          this.phone=phone
          this.sex=sex
          this.year_salary=year_salary
          this.month_salary=month_salary
          this.remark=remark
      })
  }
};
</script>
 
<style lang = "less" scoped>
.box{
    height: 60px;
    background-color: blue;
    ul{
        display: flex;
        justify-content: space-around;
        img{
            width: 25px;
            height: 25px;
            margin-bottom: 5px;
        }
    }
}
ul{
    padding: 15px;
    .app{
        display: flex;
        justify-content: space-between;
        border-bottom:1px solid #ccc ;
    }
}
</style>